<template>
  <div class="editor_wrap">
     <div style="border: 1px solid #ccc;min-width: 365px; max-width: 100%; ">
              <!-- 工具栏 -->
              <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" 
              :defaultConfig="toolbarConfig"  />

              <!-- 编辑器 -->
              <Editor :style="{height: height,' overflow-y': 'hidden'}" v-model="content" 
              :defaultConfig="editorConfig" @onCreated="handleCreated" />
            </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, shallowRef, onBeforeUnmount ,defineModel,defineProps} from 'vue'
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

// 富文本收集的数据  defineModel('修饰符')快速完成父传子和子传父
const content = defineModel('content')

 let {height='300px'}= defineProps<{
  height:string
 }>()

const submit = () => {
  console.log(content.value);
} 
 
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
 
 
 
// 工具栏配置
interface ToolbarConfig {
  toolbarKeys: string[]
}
const toolbarConfig:ToolbarConfig = {
  toolbarKeys: [
    "headerSelect",  // 标题选择
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'delIndent', // 缩进
    'indent', // 增进
    'divider', // 分割线
    'insertTable', // 插入表格
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen', // 全屏
    "blockquote", // 引用
    "codeBlock", // 代码块
    "insertImage", // 插入图片
    "uploadImage", // 上传图片
    "insertVideo", // 插入视频
  ]
}
 
 
// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: 'https://.....', // 上传接口 URL
      fieldName: 'file', // 图片字段名称
      // meta: {
      //   token: '您的认证token' // 如果需要的话
      // },
    }
  }
}
 
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
 
 
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
 


</script>
<style lang="scss" >
  .editor_wrap{
    width: 100%;
  }
</style> 